<template>
  <el-dialog title="美容院活动" v-if="activityDialog" :visible.sync="activityDialog" @close="close" width="60%">

    <el-form :model="myform" :rules="activityRules" ref="myform">
      <el-row :gutter="20">
        <el-col :md="12">
          <el-form-item label="活动名称" prop="name">
            <el-input v-model="myform.name" placeholder="活动名称" :maxlength="20"></el-input>
          </el-form-item>
        </el-col>
        <el-col :md="12">
          <el-form-item label="活动时间" prop="activityTime">
            <el-date-picker
              v-model="myform.activityTime"
              type="datetimerange"
              range-separator=" - "
              value-format="yyyy-MM-dd HH:mm:ss"
              :picker-options="{
                disabledDate
              }"
              :default-time="['09:00:00', '18:00:00']"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :md="12">
          <el-form-item label="活动地点" prop="address">
            <el-input v-model="myform.address" placeholder="活动地点" :maxlength="20"></el-input>
          </el-form-item>
        </el-col>
        <el-col :md="12">
          <el-form-item label="联系电话" prop="phone">
            <el-input v-model="myform.phone" placeholder="联系电话" :maxlength="11"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-form-item label="分享标题" prop="shareTitle">
          <el-input v-model="myform.shareTitle" placeholder="分享标题" :maxlength="50"></el-input>
        </el-form-item>
      </el-row>

      <el-row>
        <el-form-item label="分享描述" prop="shareContent">
          <el-input type="textarea" v-model="myform.shareContent" placeholder="分享描述" :maxlength="200"></el-input>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="美容院头像" prop="pic">
          <multi-file v-model="myform.pic" :limit="1" :handleSuccess="handleSuccess"></multi-file>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="美容院简介" prop="introduces">
          <el-input type="textarea" v-model="myform.introduces" placeholder="美容院简介" :maxlength="1000" :autosize="{ minRows: 4}"></el-input>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="活动视频" prop="activityImgId">
          <multi-file v-model="myform.activityVideoId" :accept="'video/*'" :limit="1"></multi-file>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="活动图片" prop="activityImgId">
          <multi-file v-model="myform.activityImgId" :limit="myform.activityVideoId ? 5: 6"></multi-file>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="礼品图片" prop="fileImgId">
          <multi-file v-model="myform.fileImgId" :limit="5"></multi-file>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="礼品视频" prop="activityImgId">
          <multi-file v-model="myform.fileVideoId" :limit="1" :accept="'video/*'"></multi-file>
        </el-form-item>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="activityDialog = false">取 消</el-button>
      <el-button type="primary" @click="onSubmitActivity">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
  export default {
    data() {
      return {
        myform: {
          activityTime: '',
          pic: ''
        },
        activityRules: {
          name: [
            {required: true, message: '请输入活动名称', trigger: 'blur'},
            {min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur'}
          ],
          activityTime: [
            {required: true, message: '请选择活动时间', trigger: 'change'},
          ],
          address: [
            {required: true, message: '请输入活动地址', trigger: 'blur'}
          ],
          pic: [{required: true, message: '请上传头像', trigger: 'change'}],
          phone: [
            {required: true, message: '请输入手机号', trigger: 'blur'},
            {pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号！'}
          ],
          shareTitle: [
            {required: true, message: '请输入分享标题', trigger: 'blur'}
          ],
          shareContent: [
            {required: true, message: '请输入分享标题', trigger: 'blur'}
          ],
          introduces: [
            {required: true, message: '请输入学院简介', trigger: 'blur'}
          ],
        },
        activityDialog: false,
        uploadUrl: "",
        beautyId: null
      }
    },
    methods: {
      /**
       * 提交活动
       */
      onSubmitActivity() {
        this.$refs.myform.validate((valid) => {
          if (valid) {
            const activityTime = this.myform.activityTime
            if (activityTime && activityTime.length === 2) {
              this.myform.startTime = activityTime[0]
              this.myform.endTime = activityTime[1];
            }
            this.myform.pic = this.myform.pic.join()
            this.myform.creater = this.beautyId
            this.$http.post('/activity', this.myform).then((res) => {
              if (0 === res.code) {
                this.$notify.success({
                  title: '成功',
                  message: '保存成功！'
                });
                this.activityDialog = false
              } else {
                this.$notify.error({
                  title: '失败',
                  message: res.msg
                });
              }
            })
          }
        });
      },
      loadActivity() {
        this.myform = {
          activityTime: ''
        }
        this.$http.get("/activity/now/" + this.beautyId).then(res => {
          if (res.code === 0 && res.data != null) {
            this.myform = res.data
            var pic = []
            pic.push(this.myform.pic)
            this.myform.pic = pic
            this.myform.activityTime = ''
            if (this.myform.startTime && this.myform.endTime) {
              this.myform.activityTime = [this.myform.startTime, this.myform.endTime]
            }
          }
        })
      },
      disabledDate(time) {
        return time < new Date()
      },
      handleSuccess(res, file, fileList) {
        if (res.code == '0') {
          this.myform.pic = []
          this.myform.pic.push(res.data)
          this.$refs['myform'].validateField('pic')
          this.$notify.success('文件：' + file.name + '上传成功！')
        } else {
          this.$notify.error('文件：' + file.name + '上传失败')
        }
      },
      close(){
        this.$refs.table.loadData()
      }
    },
    watch: {
      activityDialog(val) {
        if (val) {
          this.loadActivity()
        }
      }
    },
  }
</script>
<style>
  .el-date-editor.el-input, .el-date-editor.el-input__inner, .el-radio-group {
    width: 100% !important;
  }
</style>
